<!-- 风险气泡图 -->
<template>
  <div class="content">
    <el-card class="box-card">
      <div slot="header">
        <span style="color: rgb(14, 175, 14);">风险气泡图</span>
      </div>
      <div class="box">
        <div id="riskBuChart" style="width: 100%;height:800px"></div>
        <div class="listBox">
          <span class="item" v-for="(itm,idx) in days" :key="idx">{{ itm }}</span>
        </div>
        <div class="listBox2">
          <span class="item" v-for="(itm,idx) in degrees" :key="idx">{{ itm }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: undefined,
      days: ['临近天数','0','0','0','0','0','0','0'],
      degrees: ['影响程度','3','2','51','4','3','3','3']
    }
  },
  props: {
    tabNum: {
      type: String,
      default: '0'
    }
  },
  watch: {
    tabNum() {
      this.$nextTick(() => {
        this.chart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('riskBuChart')
      this.chart = echarts.init(ctx)
      
      var data = [
        ['上线使用功能报错',20,2000],
        ['原材料价格上涨',35,1500],
        ['客户方项目实施人员离职',20,88],
        ['客户方项目成员不稳定',80,310],
        ['新增需求不处理影响验收',65,220],
        ['材料价格上涨风险',10,220],
        ['装修工人短缺风险',95,220]
      ];
      const colorList = ["green", 'lightgreen', '#b0f566', '#9bd08c', '#4af2a1', '#03FA8B', '#03FA8B']
      let seriesArr = data.map((v,index)=>{
        return {
            name: v[0],
            data: [[v[1],[v[2]]]],
            type: 'scatter',
            symbolSize: function(){
                // console.log(Math.sqrt(v[1]*v[2]) / 10)
                return Math.sqrt(v[1]*v[2]) 
            },
            label:{
              show:true,
              position:'bottom',
              color:"#333",
              formatter: function (param) {
                return v[0];
              },
              
            },
            cursor:'pointer',
            itemStyle: {
                color: colorList[index],
                borderWidth:1,
                borderColor:'green',
                opacity:.6
            }
        };
      })
      let option = {
        backgroundColor:'#fff',
        title: {
            text: '临近天数、影响程度统计'
        },
        legend: {
            right: 10,
        },
        grid: {
            left: "8%",
            right: "10%",
            bottom: "20%",
            top: "20%",
        },
        xAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisTick:{
                    show :false,
                },
                axisLine: {
                lineStyle: {
                    color: '#666',
                },
            },
            name:"影响程度"
        },
        yAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisTick:{
                    show :false,
                },
                axisLine: {
                lineStyle: {
                    color: '#666',
                },
            },
            name:"临近天数",
            scale: true
        },
        series: seriesArr
    };
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  .listBox {
    display: flex;
    width: 100%;
    height: 50px;
    gap: 20px;
    .item {
      width: 100%;
      text-align: center;
      line-height: 50px;
      color: green;
      background-color: rgb(177, 243, 177);
    }
  }
  .listBox2 {
    display: flex;
    width: 100%;
    height: 50px;
    gap: 20px;
    .item {
      width: 100%;
      text-align: center;
      line-height: 50px;
      color: green;
      background-color: rgb(228, 249, 228);
    }
  }
}
</style>